<!DOCTYPE html> 
<html> 
<head> 

	<meta name="viewport" content="width=device-width, initial-scale=1"> 

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="js/jquery-1.10.2.min.js"></script>
	<script src="js/jquery.mobile-1.3.1.min.js"></script>

	<style>
	html, body { padding: 0; margin: 0; }
	html, .ui-mobile, .ui-mobile body {
    	height: 415px;
	}
	.ui-mobile, .ui-mobile .ui-page {
    	min-height: 415px;
	}
	.ui-content{
		padding:10px 15px 0px 15px;
	}
	.ui-dialog-contain {
		width: 72.5%;
		max-width: 500px;
		margin: 10% auto 15px auto;
		padding: 0;
		position: relative;
		top: -15px;
	}
	.ui-grid-a .ui-block-a {
		width: 30%;
	}
	.ui-grid-a .ui-block-b {
		width: 70%;
	}
	.images {
	  width:30%;
	  height:30%;
	 }
	</style>
</head> 
<link rel="stylesheet" href="smarttaxi_themes.css" />	

<body>
<div data-role="dialog" data-overlay-theme="e">
	
		<div data-role="header" data-theme="a">
			<h1>Hi, Alan</h1>
		</div>

		<div data-role="content" data-theme="e">
			<div class="ui-grid-a">
	            <div class="ui-block-a" align="center">
	                <img border="0" src="../images/avatar.png">
	            </div>
	            <div class="ui-block-b" align="center">
	           		<p>Credit: 3</p>
					<a data-role='button' data-icon='star' data-iconpos='notext' data-inline="true"></a>
					<a data-role='button' data-icon='star' data-iconpos='notext' data-inline="true"></a>
					<a data-role='button' data-icon='star' data-iconpos='notext' data-inline="true"></a>				
				</div>        	
	        </div>
	        <hr />
	        <table>
				<tr>
					<td class="textRow"><span><h5> Name: </h5></span></td>
					<td><p id="nickname_text"><h5> Alan Paul </h5></p>
				<!-- 	<input id="nickname_input" type="number" placeholder="user name"
							data-clear-btn="true" style="display:none;"/> -->	
					</td>
				</tr>
				<tr>
					<td class="textRow"><span><h5> Phone: </h5></span></td>
					<td><p id="phone_text"><h5> 13642474088</h5></p>
				<!-- 	<input id="phone_input" type="number" placeholder="phone number"
							data-clear-btn="true" style="display:none;"/></td> -->	
					</td>
				</tr>	     
			</table> 
			<hr />	
			<a id="modify_btn" data-role="button" data-theme="e">Modify</a>   
			<a id="ok_btn" data-role="button" data-rel="back" data-theme="e"  style="display:none;">OK</a>  		
			<a data-role="button" data-rel="back" data-theme="e">Cancel</a>    
		</div>
		
</div>

<script type="../js/personal-info.js"></script>
 
</body>
</html>